<script setup lang="ts">
defineOptions({
  name: "loadRate"
});
import { ref, reactive, onMounted, computed, markRaw } from "vue";
import echartsCom from "@/views/common/components/echartsCom/index.vue";
import ICON from "@/assets/svg/common/echarts.svg?component";
import { useInitLoading } from "@/hooks/useCommon";
import { loadingTimeout } from "@/utils/http/constant";
import loadRateItem from "./loadRateItem.vue";

interface Props {
  data?: Array<any> | null;
  dark?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  dark: false
});
const isShowDetail = ref<boolean>(false);
const loadRateItemRef = ref<any>(null);
const dailogTitle = ref("");
const totalData = computed(() => {
  return props.data.map(item => {
    const { loadName = "", value = 0, mainKey = "", currentValue = 0 } = item;
    const label = loadName;
    const text = `${currentValue}A`;
    const subtext = loadName;
    const data = [{ value }];
    const echartsData = {
      text,
      subtext,
      data
    };
    const options = formatOption(echartsData);
    return { label, options, mainKey, loadName };
  });
});

const loadRateClass = ref<string>(`loadRate_${Math.random().toString(36).slice(2, 10)}`);
const loadingInstance = ref<any>(null);
const echartsComRef = ref<any>(null);

const formatOption = (echartsData: any) => {
  const { text, subtext, data } = echartsData;
  const commonTextStyle = {
    fontSize: 14,
    fontWeight: 600,
    align: "center"
  };
  return {
    title: {
      show: true,
      text,
      subtext,
      textStyle: commonTextStyle,
      subtextStyle: commonTextStyle,
      textAlign: "center",
      left: "48%",
      top: "71%",
      itemGap: 8
    },
    tooltip: {
      show: true,
      formatter: function (params) {
        const title = `<span style=\"font-weight: 600;\">${subtext}</span>`;
        const v = `<span>负载率：<span style=\"font-weight: 600;\">${params.value}%</span></span>`;
        return `${title}<br/>${v}`;
      },
      confine: true
    },
    series: [
      {
        type: "gauge",
        radius: "99%",
        center: ["50%", "48%"],
        min: 0,
        max: 100,
        progress: {
          show: true,
          roundCap: true,
          width: 6
        },
        itemStyle: {
          color: "#4C9CFF", //#3B82F6FF
          shadowColor: "#E7EEFB80"
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 6
          }
        },
        pointer: {
          width: 3,
          itemStyle: {
            color: "#4C9CFF" //#3B82F6FF
          }
        },
        axisTick: {
          distance: 2,
          length: 4,
          lineStyle: {
            width: 1
          }
        },
        splitLine: {
          distance: 2,
          length: 8,
          lineStyle: {
            width: 1
          }
        },
        axisLabel: {
          distance: 14,
          fontSize: 9
        },
        detail: {
          show: false
        },
        data
      }
    ]
  };
};

const initLoading = () => {
  const target = `.${loadRateClass.value}`;
  loadingInstance.value = useInitLoading(target);
  setTimeout(() => {
    loadingInstance.value.close();
  }, loadingTimeout);
  return loadingInstance.value;
};

const updateEchartsOption = () => {
  for (const item of loadRateItemRef.value) {
    item.updateEchartsOption();
  }
};
const showDetailHandler = async (item: any) => {
  // detailData.value = null;
  // const { mainKey: mainKey_ = "", mainName = "", type: type_ = "" } = item;
  // if (!mainKey_ || !type.value) return;
  // mainKey.value = mainKey_;
  isShowDetail.value = true;
};
defineExpose({
  loadingInstance,
  initLoading,
  updateEchartsOption
});
onMounted(() => {});
</script>

<template>
  <div class="main-progres-status-content" :class="loadRateClass">
    <div v-for="item in totalData" :key="item.label" class="content-item">
      <loadRateItem ref="loadRateItemRef" :data="item" :dark="dark" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-progres-status-content {
  display: flex;
  gap: 26px;
  align-items: center;
  width: 100%;
  height: 100%;

  .content-item {
    position: relative;
    flex: 1;
    min-width: 10%;
    height: 100%;
  }
}
</style>
